<template>
  <el-col :span="24" class="bg_f8 pd_10_20 mar_top_15 config">
    <el-col :span="12">
      <p class="size_13 sizeColor_333  bold">
        {{ title.title + "【" + title.iden + "】" }}
      </p>
      <p class="size_13 sizeColor" v-if="types != 'checkbox'" v-html="title.help">
        {{ title.help }}
      </p>
    </el-col>
    <el-col :span="12" v-if="types == 'text'">
      <el-col :span="10" class="f_r miss_input">
        <el-input v-if="title.yz == '2'" v-int v-model="ss" placeholder="请输入内容" @blur="inputBlur"></el-input>
        <el-input v-else v-model="ss" placeholder="请输入内容" @blur="inputBlur"></el-input>
      </el-col>
    </el-col>

    <el-col :span="12" v-else-if="types == 'timepicker'">
      <div :span="16" class="f_r miss_input clearfix">
        <el-time-picker style="width:100%" is-range :editable="true" arrow-control format="HH:mm" v-model="timepicker" :default-value="new Date()"
            range-separator="-" :clearable="false" @change="changetime" start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm"
            placeholder="选择时间范围">
        </el-time-picker>
      </div>
    </el-col>

    <el-col :span="12" v-else-if="types == 'checkbox'">
      <el-checkbox-group v-model="checkList" @change="updateCheckbox" class="config_checkbox">
        <el-checkbox v-for="(lab, i) in zifu(checks)" :key="i" :label="lab"></el-checkbox>
      </el-checkbox-group>
    </el-col>
    <el-col :span="12" v-else-if="types == 'upload'" v-loading="loading2">
      <compressimgUpload class="uploadIsXuan f_r is_mar" :isGzip="false" listType="text" :isCropper="false" :onSuccess="onSuccess" :isOneImg="true"
          :files="fileList"></compressimgUpload>
      <el-button :loading="$store.state.isLoading" type="success" size="small " class="f_r is_mar" :disabled="ss == ''" @click="toImg">查看</el-button>
      <el-col :span="10" class="f_r">
        <el-input v-model="ss" placeholder="请输入内容" @blur="inputBlur"></el-input>
      </el-col>
      <el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="400px" height="400px">
        <img width="100%" :src="$fnc.getImgUrl(dialogImageUrl)" alt="" />
      </el-dialog>
    </el-col>
    <el-col :span="12" v-else-if="types == 'time'">
      <el-col :span="10" class="f_r">
        <el-time-select @change="gettime" placeholder="起始时间" v-model="ss" :picker-options="{
            start: '05:00',
            step: '00:30',
            end: '09:00'
          }">
        </el-time-select>
      </el-col>
    </el-col>
    <el-col :span="12" v-else-if="types == 'radio'">
      <el-col :span="24" class="f_r">
        <el-radio-group v-model="ss" @change="getbalancetype">
          <el-radio v-for="(item, index) in zifu(checks)" :label="item" :key="index"></el-radio>
        </el-radio-group>
      </el-col>
    </el-col>

    <el-col :span="12" v-else-if="types == 'balance'">
      <el-col :span="24" class="f_r">
        <el-radio-group v-model="ss" @change="getbalancetype">
          <el-radio :label="item.value" v-for="(item, index) in rewardOption" :key="index">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-col>
    </el-col>

    <el-col :span="12" v-else-if="types == 'account'">
      <el-checkbox-group v-model="checkList" @change="updateCheckbox" class="config_checkbox">
        <el-checkbox v-for="(lab, i) in rewardOption" :key="i" :label="lab.value">{{ lab.label }}</el-checkbox>
      </el-checkbox-group>
    </el-col>

    <el-col :span="12" v-else-if="types == 'coupon'">
      <el-col :span="10" class="f_r">
        <el-select placeholder="请选择" v-model="ss" @change="getbalancetype" style="width:220px" clearable>
          <el-option v-for="item in couponOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-col>
    <el-col :span="12" v-else-if="types == 'link'">
      <el-col :span="10" class="f_r" style="display: flex;justify-content: center;align-items: center;">
        <el-input v-model="ss" placeholder="请输入链接地址" @blur="inputBlur" style="margin-right:5px"></el-input>

        <LinkMenu @sendRow="getSendRow"></LinkMenu>
      </el-col>
    </el-col>
    <el-col :span="12" v-else class="tr">
      <el-switch class="zdySwith" :width="82" v-model="ss" active-color="#1aad19" inactive-color="#ffffff" active-text="已开启" inactive-text="已关闭"
          active-value="1" @change="getIskeck" inactive-value="0">
      </el-switch>
      <!-- <switchc style="font-size:13px;position: relative;top: 22%;" v-model="ss" @change="getIskeck" text="已开启|已关闭"></switchc> -->
    </el-col>
  </el-col>
</template>
<script>
import switchc from "@/components/currency/Swich.vue";
import base from "../../assets/js/request/api/base.js";
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import LinkMenu from "@/components/currency/Link_menu.vue";
export default {
  data () {
    return {
      loading: false,
      loading2: false,
      ss: this.title.value,
      types: this.title.types,
      iden: this.title.iden,
      value: this.title.value,
      checks: this.title.help,
      checkList: [],
      fileList: [],
      dialogImageUrl: this.ss || "",
      dialogVisible: false,
      showImg: true,
      uploImg: this.title.value,
      time: Date.now(),
      rewardOption: this.$store.state.rewardOption,

      couponOptions: [
        {
          value: "未支付",
          label: "未支付"
        },
        {
          value: "支付完成",
          label: "支付完成"
        }
      ],
      timepicker: ["05:00", "08:00"]
    };
  },
  props: {
    title: {
      title: String,
      help: String,
      types: String,
      value: String,
      yz: String
    }
  },
  components: {
    switchc,
    compressimgUpload,
    LinkMenu
  },
  computed: {
    getReward () {
      return this.$store.state.rewardOption;
    }
  },
  watch: {
    getReward (val) {
      console.log(val);
      this.rewardOption = val;
    }
  },
  methods: {
    getSendRow (row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      if (row == null) return false;
      if (!row.disable && row.title == "自定义链接") {
        this.ss = "";
        this.$emit("par", this.subInfo(this.ss));
        return false;
      }
      if (row.url) {
        this.ss = row.url;
      }
      if (row.url_title == "产品分类" && row.click_title == "供应商分类") {
        this.ss = "/pages/shop/supplier/supplier?cate=" + row.id;
        return;
      }
      if (row.url_title == "产品分类" && row.click_title != "供应商分类") {
        this.ss = "/shop/shopsearch?cate_id=" + row.id;
      }
      if (row.url_title == "旅游产品分类") {
        this.ss = "/tourshop/cate?cate_id=" + row.id;
      }
      if (row.url_title == "插件管理") {
        this.ss = row.url || "";
      }
      if (row.url_title == "商品选择") {
        this.ss = "/pages/shop/shopdetail/shopdetail?id=" + row.id;
      }
      if (row.url_title == "文章添加") {
        this.ss = "/pages/news/newsdetail/newsdetail?id=" + row.id;
      }
      if (row.url_title == "资讯分类") {
        this.ss = "/news?cate_id=" + row.id;
      }
      if (row.url_title == "商品分类2") {
        this.ss = "/shop/shopslide?cate_id=" + row.id;
      }

      this.$emit("par", this.subInfo(this.ss));
    },
    changetime (val) {
      var val = val.join("|");
      this.$emit("par", this.subInfo(val));
    },
    getbalancetype (val) {
      this.$emit("par", this.subInfo(val));
    },
    gettime (val) {
      this.$emit("par", this.subInfo(val));
    },
    getIskeck (val) {
      this.$emit("par", this.subInfo(val));
    },
    inputBlur () {
      this.$emit("par", this.subInfo(this.ss));
    },
    zifu (str) {
      if (str) {
        var arr = str.split("|");
        if (this.title.types == "timepicker") {
          arr[0] = parseInt(this.$fnc.vuetime(arr[0]));
          arr[1] = parseInt(this.$fnc.vuetime(arr[1]));
        }
        return arr;
      }
    },
    onSuccess (pic) {
      this.ss = pic;
      this.showImg = true;
      this.$emit("par", this.subInfo(pic));
      this.loading2 = false;
    },
    subInfo (val) {
      var data = {
        iden: this.iden,
        value: val
      };
      return data;
    },
    updateCheckbox (val) {
      console.log(val);
      this.$emit("par", this.subInfo(val.join("|")));
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    toImg () {
      this.dialogVisible = true;
      this.dialogImageUrl = this.ss;
    },

    getCouponType () {
      var params = {};
      this.$api.getNews.getCouponOption(params).then(res => {
        if (res.data.code == 200) {
          this.couponOptions = res.data.result;
        }
        this.loading = false;
      });
    }
  },
  beforeCreate () {
    this.loading = true;
  },
  created () {
    if (this.title.types == "coupon") {
      this.getCouponType();
    }
    if (this.title.types == "timepicker") {
      if (
        this.title.value == "0" ||
        this.title.value == null ||
        this.title.value == ""
      ) {
        this.timepicker = ["05:00", "08:00"];
      } else {
        this.timepicker = this.title.value.split("|");
      }
    }

    if (this.title.types == "checkbox" || this.title.types == "account") {
      if (
        this.title.value == "" ||
        this.title.value == "|" ||
        this.title.value == null
      ) {
        this.checkList = [];
      } else {
        this.checkList = this.zifu(this.title.value);
      }
    }
    if (this.title.types == "account" && this.$store.state.rewardOption == "") {
      this.$api.getPlugin.rewardOp({}).then(res => {
        if (res.data.code == 200) {
          this.rewardOption = res.data.result;
          this.$store.commit("setRewardOption", res.data.result);
        }
      });
    }
    this.loading = false;
  }
};
</script>
<style lang="less" scope>
.config_checkbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .el-checkbox {
    margin-right: 0;
    width: 20%;
    display: flex;
  }
}
</style>
